<template>
	<view class="attendance-record-container">
		<view class="attendance-record-top">
			<view class="roster-info">
				<preview-image class="avatar-container" :avatar="avatar || defaultAvatarImg" previewClass="avatar"></preview-image>
				<view class="roster-info-main">
					<view class="roster-name">
						<text class="name-content">{{ rosterName }}</text>
						<text class="work-type-tag" v-if="worktypeOrStationName">{{ worktypeOrStationName }}</text>
					</view>
					<view class="org">{{ orgName }}</view>
				</view>
			</view>
			<picker mode="date" fields="month" :value="chooseDate" @change="changeDate">
				<view class="choose-month">
					<text>{{ chooseDate }}</text>
					<icon type="icon-riqi2" :size="32" />
				</view>
			</picker>
		</view>
		<scroll-view class="scroll-view" scroll-y>
			<view class="attendance-record-list" v-if="attendanceList.length != 0">
				<view class="attendance-record-item" v-for="(item, index) in attendanceList" :key="index">
					<view class="time">{{ item.date }}</view>

					<view class="day-record-list">
						<view class="day-record-item" v-for="(dayAttendanceItem, dayAttendanceIndex) in item.list" :key="dayAttendanceIndex">
							<view class="day-record-left">
								<view class="day-record-time">
									<view :class="'record-type-tag ' + (dayAttendanceItem.inOrOut == 1 ? 'in' : '') + ' ' + (dayAttendanceItem.inOrOut == 0 ? 'out' : '')">
										{{ dayAttendanceItem.inOrOut == 1 ? '进' : '' }}{{ dayAttendanceItem.inOrOut == 0 ? '出' : '' }}
									</view>
									<view>{{ dayAttendanceItem.recordTime }}</view>
								</view>
								<view class="day-record-content">
									<image class="content-icon" :src="zhajiImg" v-if="dayAttendanceItem.deviceType === 1"></image>
									<image class="content-icon" :src="yidongImg" v-if="dayAttendanceItem.deviceType === 2"></image>
									<image class="content-icon" :src="zidongImg" v-if="dayAttendanceItem.deviceType === 3"></image>
									<image class="content-icon" :src="outSendImg" v-if="dayAttendanceItem.deviceType === 4"></image>
									<image class="content-icon" :src="xiaochengxuImg" v-if="dayAttendanceItem.deviceType === 5"></image>
									<text class="content-address">{{ dayAttendanceItem.signalName }}</text>
								</view>
							</view>

							<preview-image class="day-record-right-container" :avatar="dayAttendanceItem.imgUrl" preview-class="day-record-right"></preview-image>
						</view>
					</view>
				</view>
			</view>
			<view class="no-data" v-else>
				<no-data></no-data>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import previewImage from '@/pagesA/components/common/preview-image/preview-image';
import noData from '@/pagesA/components/common/no-data/no-data';
// import zhajiImg from '@/pagesA/assets/image/zha-ji.png';
// import yidongImg from '@/pagesA/assets/image/yi-dong.png';
// import zidongImg from '@/pagesA/assets/image/zi-dong.png';
// import outSendImg from '@/pagesA/assets/image/out-send.png';
// import xiaochengxuImg from '@/pagesA/assets/image/xiao-cheng-xu.png';
// import defaultAvatarImg from '@/pagesA/assets/image/default-avatar.png';
import { common } from '@/pagesA/utils/common.js';
import moment from 'moment';
const app = getApp();
export default {
	components: {
		previewImage,
		noData
	},
	data() {
		return {
			avatar: '',
			rosterName: '',
			orgName: '',
			worktypeOrStationName: '',
			attendanceList: [],
			chooseDate: '',
			projectUuid: '',
			zhajiImg: common.imgs.zhajiImg,
			yidongImg: common.imgs.yidongImg,
			zidongImg: common.imgs.zidongImg,
			outSendImg: common.imgs.outSendImg,
			xiaochengxuImg: common.imgs.xiaochengxuImg,
			defaultAvatarImg: common.imgs.defaultAvatarImg,
			rosterUuid: '',
			dayAttendanceIndex: 0,
			dayAttendanceItem: {
				inOrOut: 0,
				recordTime: '',
				deviceType: 0,
				signalName: '',
				imgUrl: ''
			}
		};
	},
	onLoad(options) {
		this.chooseDate = options.recordTime ? moment(options.recordTime).format('YYYY-MM') : moment().format('YYYY-MM');
		this.rosterUuid = options.rosterUuid;
		this.projectUuid = options.projectUuid || app.globalData.currentProject.projectUuid;
		// this.setData({
		// 	chooseDate: this.chooseDate
		// });
		this.getAttendanceRecordList();
	},
	onShow() {},
	methods: {
		changeDate(e) {
			// this.setData({
			// 	chooseDate: e.detail.value
			// });
			this.chooseDate = e.detail.value;
			this.getAttendanceRecordList();
		},

		getAttendanceRecordList() {
			uni.showLoading({
				title: '加载中'
			});
			let postData = {
				projectUuid: this.projectUuid,
				month: this.chooseDate,
				rosterUuid: this.rosterUuid
			};
			if (!postData.rosterUuid) {
				delete postData.rosterUuid;
			}
			common.apis.home.getAttendanceList(postData).then(
				(res) => {
					uni.hideLoading();
					let attendanceList = res.data.list;
					for (let monthAttendanceItem of attendanceList) {
						for (let dayItem of monthAttendanceItem.list) {
							dayItem.recordTime = dayItem.recordTime ? moment(dayItem.recordTime).format('HH:mm:ss') : '';
							dayItem.imgUrl = common.commonMethods.imgShow(dayItem.imgUrl);
						}
					}
					// this.setData({
					// 	attendanceList,
					// 	avatar: res.data.avatar,
					// 	rosterName: res.data.rosterName,
					// 	orgName: res.data.orgName,
					// 	worktypeOrStationName: res.data.worktypeOrStationName
					// });
					this.attendanceList = attendanceList;
					this.avatar = common.commonMethods.imgShow(res.data.avatar);
					this.rosterName = res.data.rosterName;
					this.orgName = res.data.orgName;
					this.worktypeOrStationName = res.data.worktypeOrStationName;
				},
				() => {
					uni.hideLoading();
				}
			);
		}
	}
};
</script>
<style>
.attendance-record-container {
	height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: #f6f7fa;
}

.attendance-record-top {
	background-color: #fff;
	padding: 20rpx 32rpx;
}

.roster-info {
	display: flex;
	align-items: center;
}

.roster-info .avatar-container {
	width: 100rpx;
	height: 100rpx;
	border-radius: 12rpx;
}

.roster-info .avatar {
	width: 96rpx;
	height: 96rpx;
	border-radius: 12rpx;
	border: 1px solid #c8d1ed;
}

.roster-info .roster-info-main {
	flex: 1;
	min-height: 100rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-left: 24rpx;
}

.roster-info-main .roster-name {
	display: flex;
	align-items: center;
	font-size: 34rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 550;
	color: #1e253f;
	word-break: break-all;
}

.roster-info-main .name-content {
	max-width: 210rpx;
	flex-shrink: 0;
}

.roster-info-main .work-type-tag {
	min-width: 80rpx;
	min-height: 40rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #eff1f6;
	border-radius: 6rpx;
	font-size: 24rpx;
	color: #4b5680;
	padding: 0 16rpx;
	margin-left: 16rpx;
}

.roster-info-main .org {
	font-size: 28rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #949dbf;
}

.choose-month {
	height: 64rpx;
	margin-top: 36rpx;
	border: 1px solid #949dbf;
	padding: 0 24rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 28rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 550;
	color: #4b5680;
	border-radius: 8rpx;
}

.scroll-view {
	flex: 1;
	height: 0;
}

.attendance-record-list {
	padding: 0 24rpx calc(24rpx + env(safe-area-inset-bottom));
}

.attendance-record-item .time {
	font-size: 28rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 550;
	color: #4b5680;
	padding: 16rpx 0 16rpx 6rpx;
}

.attendance-record-item .day-record-list {
	background-color: #fff;
	border-radius: 24rpx;
	padding: 0 24rpx;
}

.day-record-list .day-record-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #e8e9eb;
	padding: 24rpx 0;
}

.day-record-list .day-record-item:last-child {
	border-bottom: 0;
}

.day-record-left {
	flex: 1;
	min-height: 108rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.day-record-left .day-record-time,
.day-record-left .day-record-content {
	display: flex;
	align-items: center;
	font-size: 28rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 550;
	color: #1e253f;
}

.day-record-time .record-type-tag {
	width: 40rpx;
	height: 40rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 550;
	color: #ffffff;
	margin-right: 8rpx;
}

.day-record-time .in {
	background: #65c344;
}

.day-record-time .out {
	background: #ff943d;
}

.day-record-content .content-icon {
	width: 40rpx;
	height: 40rpx;
	margin-right: 8rpx;
}

.day-record-content .content-address {
	flex: 1;
	width: 0;
	word-break: break-all;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.day-record-right-container {
	width: 108rpx;
	height: 108rpx;
	border-radius: 8rpx;
	margin-left: 70rpx;
}

.day-record-right {
	width: 104rpx;
	height: 104rpx;
	border-radius: 8rpx;
	border: 1px solid #c8d1ed;
}

.no-data {
	height: 100%;
}
</style>
